<template>
  <div v-if="swiperList.length">
    <div class="swiper-container">
      <div class="dds">
        <div>
          <span class="search" @click="$router.push({path: '/home/search'})">
            <img src="@/assets/images/HOME_ss.png" alt />
          </span>
          <span class="clock" @click="$router.push('/my/message')" v-if="userInfo">
            <img src="@/assets/images/HOME_xx.png" alt />
            <b class="dot" v-if="userInfo && userInfo.unread_num > 0"></b>
          </span>
        </div>
      </div>
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item, index) of swiperList" :key="index">
          <a :href="item.link">
            <img :src="item.image" alt />
          </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="section">
      <!-- 往期回顾 -->
      <div class="acti-back" v-if="activityList.length">
        <panel-title />
        <div class="content">
          <div class="panel-wrapper">
            <div v-for="(item, index) of activityList" :key="index">
              <panel-item-act
                class="panel-item"
                :panelInfo="item"
                @click.native="panelItemClick(item)"
              />
            </div>
          </div>
          <div class="view-more" @click="$router.push({path: '/home/activity'})">点击更多活动</div>
        </div>
      </div>
      <!-- 设计师推荐 -->
      <div class="designer" v-if="designerList.length">
        <panel-title title="设计师推荐" content="本周推荐设计师" />
        <div class="content">
          <div v-for="(item, index) of designerList" :key="index" style="margin-bottom: 0.66rem">
            <panel-item-designer
              :designerInfo="item"
              @click.native="$router.push({path: '/home/designer-detail', query: {id: item.id}})"
            />
          </div>
          <div class="view-more" @click="$router.push({path: '/designer'})">探索全部设计师</div>
        </div>
      </div>
      <!-- 臻选品牌 -->
      <div class="brand" v-if="brandList.length">
        <panel-title title="臻选品牌" content="本周推荐品牌" />
        <div class="content">
          <div v-for="(item, index) of brandList" :key="index" class="panelItemBrand">
            <panel-item-brand
              :brandInfo="item"
              @click.native="$router.push({path: '/home/brand-detail', query: {id: item.id}})"
            />
          </div>
        </div>
        <div class="view-more" @click="$router.push('/brand')">探索全部品牌</div>
      </div>
    </div>
    <!-- tip -->
    <div class="nomore">没有更多了~</div>
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <!-- 优惠券领取 -->
    <div class="coupon-wrapper" v-if="showCoupon" @click="showCoupon = false">
      <panel-coupon
        @useCoupon="handleUseCoupon"
        :couponInfo="couponInfo"
        :showCount="false"
        :showShare="false"
        class="panel-coupon"
        title="立即领取"
      />
    </div>
  </div>
</template>
<script>
import PanelItemAct from '@/components/panel-item-act'
import PanelTitle from '@/components/panel-title'
import PanelItemDesigner from '@/components/panel-item-desinger'
import PanelItemBrand from '@/components/panel-item-brand'
import PanelCoupon from '@/views/my/coupon/panel-coupon'
import {
  getSwiperList,
  getActivityList,
  getDesignerList,
  getBrandList,
  getCouponByShare
} from '@/api/home'
import { getCouponDetail } from '@/api/my'
// import setView from './mixins/setView'
import wx from 'weixin-js-sdk'
const ERR_OK = 200
export default {
  name: 'Home',
  // mixins: [setView],
  components: {
    PanelItemAct,
    PanelTitle,
    PanelItemDesigner,
    PanelItemBrand,
    PanelCoupon
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        observer: true,
        observeParents: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        }

        // Some Swiper option/callback...
      },
      couponList: [],
      swiperList: [],
      activityList: [],
      activityId: '',
      designerList: [],
      brandList: [],
      showCoupon: false,
      couponInfo: null,
      couponId: '',
      designerId: '',
      userInfo: null
    }
  },
  mounted () {},
  created () {
    this._getSwiperList()
    this._getActivityList(0)
    this._getDesignerList()
    this._getBrandList()
    if (localStorage.getItem('USER')) {
      this.userInfo = JSON.parse(localStorage.getItem('USER'))
    }
    if (
      window.location.hash.includes('couponId') &&
      window.location.hash.includes('designerId') &&
      !window.location.hash.includes('token')
    ) {
      this.showCoupon = true
      const temp = decodeURIComponent(window.location.hash)
        .split('couponId=')[1]
        .split('&designerId=')
      this.couponId = temp[0]
      this.designerId = temp[1]
      this._getCouponDetail(this.couponId, this.designerId)
    } else if (
      window.location.hash.includes('couponId') &&
      window.location.hash.includes('designerId') &&
      window.location.hash.includes('token')
    ) {
      this.showCoupon = true
      const temp = decodeURIComponent(window.location.hash)
        .split('couponId=')[1]
        .split('&designerId=')
      this.couponId = temp[0]
      this.designerId = temp[1].split('&token')[0]
      this._getCouponDetail(this.couponId, this.designerId)
    }
  },
  methods: {
    handleUseCoupon () {
      if (this.designerId && this.couponId) {
        this._getCouponByShare({
          id: this.couponId,
          designerId: this.designerId
        }).then(res => {
          this.showCoupon = false
        })
      }
    },
    panelItemClick (item) {
      this.activityId = item.id
      if (item.link) {
        wx.miniProgram.getEnv(ress => {
          if (ress.miniprogram) {
            wx.miniProgram.navigateTo({
              url: `/pages/index/index?return_url=${encodeURIComponent(
                item.link
              )}`
            })
          }
        })
      } else {
        this.$router.push({
          name: 'HomeActivityDetail',
          params: { id: item.id }
        })
      }
    },
    _getSwiperList () {
      getSwiperList(1)
        .then(res => {
          if (res.code === ERR_OK) {
            this.swiperList = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getActivityList (status) {
      getActivityList(status)
        .then(res => {
          if (res.code === ERR_OK) {
            this.activityList = res.data.data.slice(0, 2)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getDesignerList () {
      getDesignerList()
        .then(res => {
          if (res.code === ERR_OK) {
            this.designerList = res.data.data.slice(0, 2)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getBrandList () {
      getBrandList()
        .then(res => {
          if (res.code === ERR_OK) {
            this.brandList = res.data.data.slice(0, 4)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getCouponDetail (id, designerId) {
      return getCouponDetail(id, designerId)
        .then(res => {
          if (res.code === ERR_OK) {
            res.data.coupon.start_at = res.data.start_at
            res.data.coupon.end_at = res.data.end_at
            this.couponInfo = res.data.coupon
            if (res.data.coupon.is_have_get) {
              this.showCoupon = false
              setTimeout(() => {
                this.$toast({
                  type: 'fail',
                  message: '该优惠券已被领取~',
                  duration: 2000
                })
              }, 500)
            }
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getCouponByShare ({ id, designerId }) {
      return getCouponByShare({ id, designerId }).then(res => {
        if (res.code === ERR_OK) {
          this.$toast('领取成功,请在我的优惠券里查看~')
          return Promise.resolve()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.coupon-panel {
  .top {
    padding: 0.32rem 0.36rem;
  }
}
.coupon-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  touch-action: none;
  z-index: 5;
  .panel-coupon {
    @include center();
    z-index: 6;
  }
}

.swiper-container {
  width: 100%;
  // height: 5.2rem;
  // background: #000;
  img {
    width: 100%;
  }
}
.swiper-container /deep/ .swiper-pagination-bullet {
  width: 0.12em;
  height: 0.12rem;
  background: #808080;
  border-radius: 50%;
  transition: all 0.3s;
}
.swiper-container /deep/ .swiper-pagination-bullet-active {
  width: 0.46rem;
  height: 0.12rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.06rem;
}
.swiper-container /deep/ .swiper-pagination {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  width: auto;
}
.dds {
  width: 100%;
  padding: 0.38rem 0.38rem 0 0.38rem;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  span {
    display: inline-block;
    img {
      vertical-align: top;
    }
  }
  .search {
    width: 0.34rem;
    height: 0.34rem;
    margin-right: 0.28rem;
    img {
      width: 100%;
    }
  }
  .clock {
    width: 0.32rem;
    height: 0.36rem;
    position: relative;
    .dot {
      position: absolute;
      top: -0.1rem;
      right: -0.1rem;
      width: 0.1rem;
      height: 0.1rem;
      background: rgba(245, 83, 70, 1);
      border-radius: 50%;
    }
    img {
      width: 100%;
    }
  }
}
.section {
  width: 100%;
  padding: 0 0.36rem 0 0.36rem;
  box-sizing: border-box;
  .acti-back {
    .content {
      .panel-item {
        margin-bottom: 0.66rem;
      }
    }
  }
  .brand {
    .content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .panelItemBrand {
        margin-bottom: 0.79rem;
      }
    }
  }
}
.view-more {
  width: 100%;
  height: 0.86rem;
  border: 1px solid rgba(4, 36, 45, 1);
  font-size: 0.26rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 4, 0, 1);
  line-height: 0.86rem;
  text-align: center;
  // margin-top: 0.73rem;
  box-sizing: border-box;
}
.nomore {
  font-size: 0.28rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 1rem;
  text-align: center;
}
@include slideEnter();
</style>
